<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/regist.css"/>
<title>注册维修人员</title>	
<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery.vide.js"></script>
<style>
body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 80vh;
  font-family: sans-serif;
}
.regist-form{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 250px;
  padding: 60px 40px;
  background-color: rgba(255,255,255,.8);
  box-shadow: 0 15px 20px rgba(0,0,0,.2);
  border-radius: 20px;
}
.regist-form h2{
  margin: 0 0 20px;
  padding: 0;
  text-align: center;
}
.regist-form .form-input{
  position: relative;
  margin: 10px 0;
}
.regist-form .form-input input{
  outline: none;
  height: 32px;
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
  border:1px solid rgba(0,0,0,.5);
  background: transparent;
  font-size: 15px;
  border-radius: 5px;
}
.regist-input-validation{
  position: relative;
  margin: 10px 0;
}
.regist-form .from-input-validation input{
  outline: none;
  height: 32px;
  padding: 10px;
  box-sizing: border-box;
  width: 120px;
  border:1px solid rgba(0,0,0,.5);
  background: transparent;
  font-size: 15px;
  border-radius: 5px;
}
.regist-form .form-input input[type='submit']{
  background-color: #e91e63;
  color: #fff;
  border: none;
  width: 120px;
  height: 40px;
  cursor: pointer;
  vertical-align:middle;
  text-align:center;
}
.regist-form .form-input input[type='submit']:hover{
  background-color: #0090ff;
}
</style>
<script type="text/javascript">
//前台校验
var formObj = {
	checkForm : function(){
		var canSub = true;
		canSub = this.checkNull("mpNum","工号不能为空") && canSub;
		canSub = this.checkNull("mpPassword","密码不能为空") && canSub ;
		canSub = this.checkNull("repassword","确认密码不能为空")&& canSub;
		canSub = this.checkNull("validation","验证码不能为空")&& canSub;
		canSub = this.checkPassword()&& canSub;
		return canSub;
},
//密码一致性校验
	checkPassword : function(){
		var mpPassword = $("input[name='mpPassword']").val();
		var repassword = $("input[name='repassword']").val();
		if(mpPassword!=""&&repassword!=""&&mpPassword != repassword){
			this.setMsg("repassword", "两次密码不一致");
			    return false;
		}
					return true;
},
//非空校验
	checkNull : function(name,msg){
		var tag = $("input[name='"+name+"']").val();
		//清空操作
		this.setMsg(name, "");
		if($.trim(tag) == ""){
			this.setMsg(name, msg);
				return false;
		  }
				return true;
		},
		setMsg : function(name,msg){
			//设置信息
			$("input[name='"+name+"']").nextAll("span").text(msg).css("color","red");
				}
		};
//文档就绪事件
	$(function(){
			//鼠标离开焦点事件
			$("input[name='mpNum']").blur(function(){
			formObj.checkNull("mpNum", "账号不能为空");
			});
			$("input[name='mpPassword']").blur(function(){
				formObj.checkNull("mpPassword", "密码不能为空");
			});
			$("input[name='repassword']").blur(function(){
				formObj.checkNull("repassword", "确认密码不能为空");
				formObj.checkPassword();
			});
			$("input[name='validation']").blur(function(){
				formObj.checkNull("validation", "验证码不能为空");	
			});
			//修改验证码图片
			$("#img").click(function(){
				$(this).attr("src","<%=request.getContextPath()%>/ValiImageServlet?time="+new Date().getTime());
	});
});
		</script>
	</head>
	<body style="background-color:#9932CD">
	 <form action="<%=request.getContextPath() %>/RegistMpServlet" method="POST">
	   <div class="regist-form">
		<h2>注册维修人员</h2>
        	<div style="color:red;text-align:center">
        		<%=request.getAttribute("msg")==null?"": request.getAttribute("msg")%>
        	</div>
        	<div class="form-input">
            	<input type="text" name="mpNum" placeholder="请输入工号" value="<%=request.getParameter("account")==null?"":request.getParameter("account")%>">
            	<span></span>
        	</div>
        	<div class="form-input">
            	<input type="password" name="mpPassword" placeholder="请输入密码" value="<%=request.getParameter("password")==null?"":request.getParameter("password")%>">
            	<span></span>
        	</div>
        	<div class="form-input">
            	<input type="password" name="repassword" placeholder="确认密码" value="<%=request.getParameter("password")==null?"":request.getParameter("password")%>">
            	<span></span>
        	</div>
        	<div class="form-input">
            	<input type="text" name="buildingId" placeholder="请输入楼号" value="${sessionScope.administrator.buildingId }" readonly="readonly">
            	<span></span>
        	</div>
        	<div class="form-radio">
        		<input type="radio" name="mpType" value="水工" checked="checked"> 木工
        		<input type="radio" name="mpType" value="水工"> 水工
           		<input type="radio" name="mpType" value="电工"> 电工
       		</div>
        	<div class="from-input-validation">
            	<input type="text" name="validation" placeholder="请输入验证码">
            	<span></span>
            	<img id="img" src="<%=request.getContextPath() %>/ValiImageServlet" width="" height="" alt="" />
        	</div>
        	<div class="form-input">
            	<input type="submit" value="注册">
        	</div>
        	</div>
      </form>
	</body>
</html>